<template>
  <el-container>
    <el-container>
      <!-- aside -->
      <el-aside width="200px">
        <el-row>
          <el-button size="mini" type="success" round @click="addControl('box')"
            >box容器</el-button
          >
          <el-button size="mini" round @click="addControl('el-button')"
            >el-button</el-button
          >
          <el-button
            size="mini"
            type="primary"
            round
            @click="addControl('myradio')"
            >myradio</el-button
          >
          <el-button
            size="mini"
            type="primary"
            round
            @click="addControl('mycheck')"
            >mycheck</el-button
          >
          <el-button size="mini" round @click="addControl('el-date-picker')"
            >el-date-picker</el-button
          >
          <el-button size="mini" round @click="addControl('el-input')"
            >el-input</el-button
          >
        </el-row>
      </el-aside>
      <el-container>
        <!-- main -->
        <el-main>
          <compiler :conf="conf"></compiler>
        </el-main>
        <el-footer>
          {{ selectedUI }}
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>
<script>
import UIState from "../components/compiler/mixin/UIState";
export default {
  mixins: [UIState],
  data() {
    return {
      conf: [
        {
          tag: "box",
          children: [
            {
              tag: "el-button",
              data: {
                props: {
                  type: "success",
                },
              },
              slot: [
                {
                  name: "default",
                  default: "按钮",
                  content: "我的按钮",
                },
              ],
            },
            {
              tag: "div",
              slot: [
                {
                  content: "这是一段普通文本",
                },
              ],
            },
            {
              tag: "mycheck",
            },
          ],
        },
        {
          tag: "el-button",
          data: {
            props: {
              type: "primary",
            },
          },
          slot: [
            {
              name: "default",
              default: "按钮",
              content: "我的按钮",
            },
          ],
        },
        {
          tag: "el-checkbox",
        },
        {
          tag: "mycheck",
        },
        {
          tag: "myinput",
          data: {
            value: "my input",
          },
        },
      ],
    };
  },

  methods: {
    getUI(ctype) {
      return {
        // 支持el组件和自定义组件
        box: { tag: "box", children: [] },
        "el-button": { tag: "el-button", slot: [{ content: "Button" }] },
        "el-date-picker": {
          tag: "mydatepicker",
          data: { value: "2022-12-11" },
        },
        "el-input": {
          tag: "myinput",
          data: { value: 123 },
          attrs: { type: "number" },
        },
        myradio: { tag: "myradio" },
        mycheck: { tag: "mycheck" },
      }[ctype];
    },
    addControl(ctype) {
      let control = this.getUI(ctype);
      if (this.selectedUI && this.selectedUI.tag == "box") {
        this.selectedUI.children.push(control);
      } else {
        this.conf.push(control);
      }
    },
  },
};
</script>


<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  min-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  min-height: 360px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>